'use strict';

import React from "react";
import {AppRegistry,
    StyleSheet,
    Text,
    ScrollView,
    Image,
    FlatList,
    View,
    SectionList
    ,Button,
    TouchableHighlight,
    Animated
    } from "react-native";
import {StackNavigator,} from 'react-navigation';




class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        return (<View>
            <Text>Hello, Navigation!</Text>
            <Button
                onPress={() => this.props.navigation.navigate('Chat')}
                title="Chat with Lucy"
            />
            <Image source={{uri:'ic_xiong'}} style={{width:40,height:40}}/>
        </View>
        );
    }
}

class ChatScreen extends React.Component {
    static navigationOptions = {
        title: 'Chat with Lucy',
    };

    _onPressButton() {
        console.log("You tapped the button!");
      }

    render() {
        return (
            <View >
                <Text>Chat with Lucy</Text>
                <Image source={require('./img/favicon.png')} />
                <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
                    style={{width: 200, height: 200}} >
                    <Text>Inside,哈哈 我在里面</Text>
                </Image>

                <TouchableHighlight style={{width:50,height:50}} onPress={this._onPressButton}>
                        <Text style={{flex:1}}>Button</Text>
                </TouchableHighlight>
                <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
                    <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
                </FadeInView>

            </View>
        );
    }
}

export default class FadeInView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),          // 透明度初始值设为0
    };
  }
  componentDidMount() {
  Animated.sequence([            // 首先执行decay动画，结束后同时执行spring和twirl动画
    Animated.decay(position, {   // 滑行一段距离后停止
      velocity: {x: gestureState.vx, y: gestureState.vy}, // 根据用户的手势设置速度
      deceleration: 0.997,
    }),


    Animated.parallel([          // 在decay之后并行执行：
      Animated.spring(position, {
        toValue: {x: 0, y: 0}    // 返回到起始点开始
      }),
      Animated.timing(twirl, {   // 同时开始旋转
        toValue: 360,
      }),
    ]),
  ]).start();
   /* Animated.timing(                            // 随时间变化而执行的动画类型
      this.state.fadeAnim,                      // 动画中的变量值
      {
      // 透明度最终变为1，即完全不透明
        toValue: 1,
        duration: 3000,

      }
    ).start(); */                                 // 开始执行动画
  }
  render() {
    return (
      <Animated.View                            // 可动画化的视图组件
        style={{
          ...this.props.style,
          opacity: this.state.fadeAnim,          // 将透明度指定为动画变量值
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

const NativeTest = StackNavigator({
    Home: { screen: HomeScreen },
    Chat: { screen: ChatScreen },
});





const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },

});


// 注意，这里用引号括起来的'NativeTest'必须和你init创建的项目名一致
AppRegistry.registerComponent('NativeTest', () => NativeTest);